<template>
    <view class="box">
        <u--image width="750rpx" height="698rpx" src="/static/image/login-bg.png"></u--image>
        <view class="content">
            <view class="logo d-flex d-row-center">
                <u--image width="138rpx" height="50rpx" src="/static/image/logo.png"></u--image>
            </view>
            <view class="form">
                <view class="d-font-48"><text>密码登录</text></view>
                <view class="d-p-t-30">
                    <u--input v-model="form.username" :customStyle="{ padding: 0, height: '100rpx'}" 
						border="bottom" placeholder="请输入账号" clearable>
					</u--input>
                </view>
                <view class="d-p-t-30">
                    <u--input v-model="form.password" :customStyle="{ padding: 0, height: '100rpx'}" 
						border="bottom" placeholder="请输入密码" password clearable>
					</u--input>
                </view>
                <!-- <view class="d-flex d-font-24 d-m-t-24" style="color: #ADB4BD;">
					<view class="d-flex-1"></view>
					<text @click="forget">忘记密码</text>
				</view> -->
                <view class="d-flex d-m-t-20 d-font-24" style="color: #999;">
                    <u-checkbox-group v-model="isRule">
                        <u-checkbox activeColor="#21A5F3" shape="circle" size="24rpx" name="rule"></u-checkbox>
                    </u-checkbox-group>
                    <view @click="setRule">我已阅读并同意</view>
                    <text style="color: #21A5F3;" @click="rule('ys')">《隐私政策》</text>
                    <view>和</view>
                    <text style="color: #21A5F3;" @click="rule('sy')">《用户使用协议》</text>
                </view>
                <view class="d-text-center d-p-t-80 d-m-t-20">
                    <u-button style="height: 84rpx;width: 500rpx;" text="登录" shape="circle" type="primary"
                        @click="login"></u-button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { postLogin, getEncode, getUserInfo } from "../../common/api.js";

export default {
    data() {
        return {
            form: {
                username: "",
                password: "",
            },
            isRule: ["rule"],
        };
    },
    onLoad() {
        let old = uni.getStorageSync("account") || {};
        this.form = {
            ...this.form,
            ...old,
        };
    },
    methods: {
        setRule() {
            if (this.isRule.length > 0) {
                this.isRule = [];
            } else {
                this.isRule = ["rule"];
            }
        },
        rule(t) {
            uni.$u.route({
                url: "/pages/login/rule",
                params: {
                    t,
                },
            });
        },
        forget() {
            uni.$u.route({
                url: "/pages/login/forget",
            });
        },
        login() {
            uni.$u.vuex("$token", null);
            if (!this.form.username) {
                return uni.$u.toast("请输入登录账号");
            }
            if (!this.form.password) {
                return uni.$u.toast("请输入登录密码");
            }
            if (this.isRule.length <= 0) {
                return uni.$u.toast(
                    "请先阅读并同意《隐私政策》、《用户使用协议》"
                );
            }
            uni.showLoading({
                title: "登录中...",
                mask: true,
            });
            getEncode({
                params: {
                    str: this.form.password,
                },
            })
                .then((e) => {
                    return postLogin({
                        ...this.form,
                        password: e.msg,
                    });
                })
                .then((e) => {
                    uni.$u.vuex("$token", e.token);
                    return true;
                })
                .catch((e) => {
                    console.error(e);
                    uni.hideLoading();
                    uni.$u.toast("账户或密码错误,请查证后再试!");
                })
                .then((e) => {
                    if (e) {
                        return getUserInfo({
                            params: {
                                appTerminal: "grd",
                            },
                        });
                    }
                })
                .then((e) => {
                    console.log('用户信息',e.data)
                    uni.$u.vuex("$user", e.data);
                    uni.hideLoading();
                    if (e.data.isLoginApp && e.data.terminal == "grd") {
                        uni.setStorageSync("account", this.form);
                        uni.$u.toast("登录成功");
                        uni.$u.route({
                            url: "/pages/index/index",
                            type: "reLaunch",
                        });
                    } else {
                        uni.$u.toast("该账户没有登陆权限!");
                        uni.$u.vuex("$token", null);
                    }
                });
        },
    },
};
</script>

<style lang="scss">
page {
    height: 100%;
    .box {
        min-height: 100%;
        .content {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            overflow: auto;
            .logo {
                padding-top: 240rpx;
            }
            .form {
                margin-top: 94rpx;
                background-color: #ffffff;
                border-radius: 60rpx;
                padding: 90rpx 64rpx;
                .d-font-48 {
                    font-size: 48rpx;
                    font-weight: bold;
                    line-height: 48rpx;
                    margin-bottom: 40rpx;
                }
            }
        }
    }
}
</style>
